<template>
	<view class="list" :style="{gridTemplateColumns: `repeat(${lineNum},1fr)`}">
		<view v-for="(item,index) in data" :key="index">
			<view class="view_box" @tap="tap_item(item,index)">
				<!-- 进行多选 -->
				<!-- <view :class="item.isSelected!=true?'up-view-text-1':'up-view-text-selected-1'" v-if="sortCarShowList" >{{item.name}}</view> -->
				<view :class="item.name==name?'up-view-text-selected-1':'up-view-text-1'" v-if="sortCarShowList" >{{item.name}}</view>
				<view :class="item.name!==name?'up-view-text':'up-view-text-selected'"  v-else>{{item.name}}</view>
				<view v-if="isImage">
					<image class="car-select-item-image" src="/static/downArrow-selected.png" ></image>
					<image class="car-select-item-image" src="/static/downArrorw-black.png" ></image>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sortCar",
		props: {
			/**
			 * 每行显示几个按钮
			 */
			lineNum: {
				type: Number,
				default: 4
			},
			/**
			 * 按钮数组
			 * [{title:'标题',name:'标题内容'}]
			 */
			data: {
				type: Array,
				default: []
			},
			name: {
				type: String,
				default: ''
			},
			
			isImage:{
				type: Boolean,
				default: false
			},
			
			sortCarShowList:{
				type:Boolean,
				default:false
			}

		},
		data() {
			return {

			};
		},
		methods: {
			tap_item(item,index) {
				this.$emit('sortItemtap', item,index)
				this.$utils.log("组件中点击" + item.name)
			}
		}

	}
</script>

<style lang="scss">
	.active {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		border-width: 2rpx;
		background-color: indianred;
	}

	.list {
		display: grid;
	}

	.item {
		display: flex;
	}



	.view_box {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.up-view-text-selected {
		color: #3F60C3;
		font-size: 26rpx;
		text-align: center;
		font-weight: bolder;
		margin: 10rpx;
		padding: 8rpx 20rpx;
		border-radius: 50rpx;
		border-style: solid;
		border-width: 3rpx;
		border-color: #3F60C3;
		width: 100%;
	}
	
	.up-view-text-selected-1{
		flex: 1;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
		line-height: 54rpx;
		color: #0E59EA;
		border: 2px solid #EDF1FF;
		opacity: 1;
		width: 140rpx;
		height: 54rpx;
		background: #EDF1FF;
		opacity: 1;
		border-radius: 28rpx;
		margin: 10rpx;
	}

	.up-view-text {
		color: #5F6060;
		font-size: 26rpx;
		text-align: center;
		font-weight: bolder;
		margin: 10rpx;
		padding: 8rpx 20rpx;
		border-radius: 50rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #eee;
		width: 100%;
	}
	
	.up-view-text-1{
		flex: 1;
		margin: 10rpx;
		height: 54rpx;
		border: 2px solid #1C212514;
		border-radius: 28rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #1C2125;
		opacity: 1;
		text-align: center;
	}

	.down-view-text {
		color: #aaa;
		font-size: 22rpx;
		text-align: center;
		word-break: break-all;
		width: auto;
		font-weight: bolder;
		margin: 5rpx 0rpx 20rpx 0rpx;
	}
	
	.car-select-item-image {
		width: 20rpx;
		height: 12rpx;
		margin-left: 10rpx;
	}
</style>